<template>
	<view class="container">
		<view class="item" v-for="(item,index) in addressList" :key="index" @click="clickItem(item)">
			<text class="iconfont iconxuanzhong xuanzhong" v-if="index == 1"></text>
			<view class="info">
				<view class="title">
					<text>王先生</text>
					<text>13512345678</text>
				</view>
				<view class="address">
					河南省郑州市中原区城区，碧沙岗西门 辉煌名媛D座1601 辉煌名媛D座1601 辉煌名媛D座1601
				</view>
			</view>
		 <text class="iconfont iconedit edit" @click.stop="edit_address"></text>
		
		</view>
		
		
		<view class="add-btn" @click="add_address">
			+新建收货地址
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList:[
					{
						id: 1,
						name: '张三',
						tel: 13512345678,
						address:"河南省郑州市中原区城区，碧沙岗西门 辉煌名媛D座1601 辉煌名媛D座1601 辉煌名媛D座1601"
					},
					{
						id: 2,
						name: '李四',
						tel: 13512345678,
						address:"河南省郑州市中原区城区，碧沙岗西门 辉煌名媛D座1601"
					},
					{
						id: 3,
						name: '王五',
						tel: 13512345678,
						address:"河南省郑州市中原区城区"
					},
				]
			}
		},
		methods: {
			//点击地址
			clickItem(e){
				uni.navigateBack({
					delta:1
				})
			},
			//新增地址
			add_address(){
				uni.navigateTo({
					url:'../add-address/add-address'
				})
			},
			edit_address(){
				uni.navigateTo({
					url:'../add-address/add-address'
				})
			}
		}
	}
</script>

<style>

	.container{
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	.item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 50rpx;
		position: relative;
	}
	.item::after{
		content: '';
		position: absolute;
		left: 0;
		bottom: -10px;
		width: 100%;
		height: 1px;
		display: block;
		background-color: #f8f8f8;
	}
	.item .info{
		flex-grow: 1;
	}
	.item .info .title{
		font-size: 35rpx;
		color: #333333;
		font-weight: 600;
		
	}
	.address{
		font-size: 25rpx;
	}
	.item .info .title text:first-child{
		margin-right: 20rpx;
	}
	.item .info .title text:last-of-type{
		font-size: 25rpx;
		color: #666;
		font-weight: 100;
	}
	.item .edit{
		align-self: flex-end ;
	}
	.item .xuanzhong{
		color: red;
		font-size: 40rpx;
		margin-right: 20rpx;
	 
	}
	.item .edit{
		color: #666;
		font-size: 50rpx;
		margin-left: 20rpx;
	 
	}
	
	.add-btn{
		position: fixed;
		left: 50%;
		bottom: 0;
		width: 80%;
		transform: translate(-50%);
		background-color: red;
		padding: 20rpx;
		text-align: center;
		color: #FFFFFF;
		font-weight: 500;
		border-radius: 50rpx;
	}
	
</style>
